<template>
  <div class="main">
    <div class="titlt">客群画像</div>
    <div class="mainBox">
      <div class="smallLine"></div>
      <div class="mainTitle">客群标签</div>
      <div class="portraitMain">
        <div class="left">
          <div id="manBox"></div>
          <div class="table">
            <el-table v-loading="loading" :data="femaleTable" :row-style="{ height: '48px' }" style="width: 100%">
              <el-table-column align="center" label="男性标签" prop="label">
              </el-table-column>
              <el-table-column align="center" label="数量" prop="num">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="right">
          <div id="womanBox"></div>
          <div class="table">
            <el-table v-loading="loading" :data="maleTable" :row-style="{ height: '48px' }" style="width: 100%">
              <el-table-column align="center" label="女性标签" prop="label">
              </el-table-column>
              <el-table-column align="center" label="数量" prop="num">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <!-- 客群分布 -->
    <div class="mainBox">
      <div class="smallLine"></div>
      <div class="mainTitle">客群分布</div>
      <div class="changeBox">
        <el-radio-group v-model="radio1" fill="#FFF4ED" text-color="#082aff" @change="queryPortraitGroupSex">
          <el-radio-button label="1">存量客户</el-radio-button>
          <el-radio-button label="2">新增客户</el-radio-button>
          <!-- <el-radio-button label="3">发送总次数</el-radio-button> -->
        </el-radio-group>
      </div>

      <!--图表区 -->
      <div class="chartBox">
        <div id="chartOne" v-loading="loading2" class="chartItem"></div>
        <div id="chartTwo" v-loading="loading2" class="chartItem"></div>
        <div id="chartThree" v-loading="loading2" class="chartItem"></div>
      </div>
      <div v-if="infoId" class="chartBox" style="margin-top: 16px;">
        <div id="chartEight" v-loading="loading2" class="chartItem"></div>
        <div id="chartNine" v-loading="loading2" class="chartItem" style="margin: 0 16px;"></div>
        <div id="chartTen" v-loading="loading2" class="chartItem"></div>
      </div>
    </div>

    <!-- 险种偏好 -->
    <div class="mainBox">
      <div class="smallLine"></div>
      <div class="mainTitle">险种偏好</div>
      <div class="areaBox">
        <div class="areaItem">
          <div id="chartFour" v-loading="loading" class="item"></div>
          <div class="item">
            <el-table v-loading="loading" :data="riskInfoData" :row-style="{ height: '48px' }" style="width: 100%">
              <el-table-column align="center" label="险种偏好" prop="value">
              </el-table-column>
              <el-table-column align="center" label="浏览量" prop="browse">
              </el-table-column>
              <el-table-column align="center" label="成交量" prop="dealCount">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>

    <!-- 地域分布 -->
    <div class="mainBox">
      <div class="smallLine"></div>
      <div class="mainTitle">地域分布</div>
      <!-- 区域图标 -->

      <div class="areaBox">
        <div class="areaItem">
          <div id="chartSeven" v-loading="loading" class="item"></div>
          <div class="item" style="margin-left: 60px">
            <el-table v-loading="loading" :data="cityData" :row-style="{ height: '45px' }" height="400"
                      style="width: 100%;"
            >
              <el-table-column align="center" label="排名" prop="rank">
                <template slot-scope="{ row }">
                  <svg-icon v-show="row.rank == 1" icon-class="first"/>
                  <svg-icon v-show="row.rank == 2" icon-class="second"/>
                  <svg-icon v-show="row.rank == 3" icon-class="third"/>
                  <div v-show="row.rank != 3 && row.rank != 2 && row.rank != 1">
                    {{ row.rank }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" label="城市" prop="name">
              </el-table-column>
              <el-table-column align="center" label="用户占比" prop="value">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>

    <!-- 客户数量 -->
    <div class="mainBox">
      <div class="smallLine"></div>
      <div class="mainTitle">客户数量</div>
      <div class="rightSider">
        <el-select v-model="dataVal" class="selector" placeholder="请选择" @change="changeVal">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <!-- 按天 -->
        <el-date-picker v-if="dayStatus" key="tian" v-model="value1" :picker-options="pickerOptions" align="right"
                        class="picker"
                        end-placeholder="结束日期" format="yyyy-MM-dd" range-separator="至"
                        start-placeholder="开始日期"
                        type="daterange" unlink-panels value-format="yyyy-MM-dd" @change="changeDates"
        >
        </el-date-picker>
        <!-- 自然周 -->
        <el-date-picker v-if="weekStatus" key="zhou" v-model="value2" :picker-options="pickerOptions" class="picker"
                        format="yyyy 第 WW 周" placeholder="选择周" type="week"
                        value-format="yyyy-MM-dd" @change="changeDates"
        >
        </el-date-picker>
        <!-- 自然月 -->

        <el-date-picker v-cloak v-if="monthStatus" key="yue" v-model="value3" :picker-options="pickerOptions"
                        class="picker"
                        end-placeholder="结束月份" placeholder="选择月" range-separator="至"
                        start-placeholder="开始月份" type="monthrange"
                        value-format="yyyy-MM" @change="changeDates"
        >
        </el-date-picker>
        <!-- 自然年 -->
        <el-date-picker v-if="yearStatus" key="nian" v-model="value4" :picker-options="pickerOptions" class="picker"
                        placeholder="选择年" size="mini" style="width: 30%" type="year" value-format="yyyy"
                        @change="changeDates"
        >
        </el-date-picker>
        <span v-if="yearStatus" class="range-word"> 至 </span>
        <el-date-picker v-if="yearStatus" key="niana" v-model="endDate" :picker-options="pickerOptions"
                        class="picker pickerYear"
                        format="yyyy" placeholder="选择结束年" size="mini" style="width: 30%" type="year"
                        value-format="yyyy"
                        @change="changeDates"
        >
        </el-date-picker>
      </div>
      <div class="titleBox">
        <div class="titleItem">
          <div class="topic">新客户数</div>
          <div class="number">
            {{ customerNum.newCustomer || 0 }} <span>人</span>
          </div>
        </div>
        <div class="titleItem">
          <div class="topic">新客户占比</div>
          <div class="number">
            {{ customerNum.newCustomerPro || '0%' }}
            <!-- <span>%</span> -->
          </div>
        </div>
        <div class="titleItem">
          <div class="topic">老客户数</div>
          <div class="number">{{ customerNum.oldCustomer || 0 }}<span>人</span></div>
        </div>
        <div class="titleItem">
          <div class="topic">老客户占比</div>
          <div class="number">{{ customerNum.oldCustomerPro || '0%' }}</div>
        </div>
        <div class="titleItem">
          <div class="topic">人均沟通时长</div>
          <div class="number">{{ customerNum.talkTime || '00:00:00' }}</div>
        </div>
      </div>

      <div id="chartFive" v-loading="loading3"></div>
    </div>
    <!-- 客户活跃度 -->
    <div class="mainBox">
      <div class="smallLine"></div>
      <div class="mainTitle">客户活跃度</div>
      <div>
        <!-- 头部右侧标题 -->
        <div class="selete">
          <el-select v-model="activeValue" clearable placeholder="请选择" style="margin-right: 12px"
                     @change="queryPortraitGroupActive"
          >
            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="rightSider">
          <el-select v-model="dataVal1" class="selector" placeholder="请选择" @change="changeVal1">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <!-- 按天 -->
          <el-date-picker v-if="dayStatus1" key="tian" v-model="value11" :picker-options="pickerOptions" align="right"
                          class="picker"
                          end-placeholder="结束日期" format="yyyy-MM-dd" range-separator="至"
                          start-placeholder="开始日期"
                          type="daterange" unlink-panels value-format="yyyy-MM-dd" @change="queryPortraitGroupActive"
          >
          </el-date-picker>
          <!-- 自然周 -->
          <el-date-picker v-if="weekStatus1" key="zhou" v-model="value22" :picker-options="pickerOptions" class="picker"
                          format="yyyy 第 WW 周" placeholder="选择周" type="week"
                          value-format="yyyy-MM-dd"
                          @change="queryPortraitGroupActive"
          >
          </el-date-picker>
          <!-- 自然月 -->
          <el-date-picker v-if="monthStatus1" key="yue" v-model="value33" :picker-options="pickerOptions" class="picker"
                          end-placeholder="结束月份" placeholder="选择月" range-separator="至"
                          start-placeholder="开始月份"
                          type="monthrange" value-format="yyyy-MM" @change="queryPortraitGroupActive"
          >
          </el-date-picker>
          <!-- 自然年 -->
          <el-date-picker v-if="yearStatus1" key="nian" v-model="value44" :picker-options="pickerOptions" class="picker"
                          placeholder="选择年" size="mini" style="width: 30%" type="year" value-format="yyyy"
                          @change="queryPortraitGroupActive"
          >
          </el-date-picker>
          <span v-if="yearStatus1" class="range-word"> 至 </span>
          <el-date-picker v-if="yearStatus1" key="niana" v-model="endDate1" :picker-options="pickerOptions"
                          class="picker pickerYear"
                          format="yyyy" placeholder="选择结束年" size="mini" style="width: 30%" type="year"
                          value-format="yyyy" @change="queryPortraitGroupActive"
          >
          </el-date-picker>
        </div>
      </div>
      <div id="chartSix" v-loading="loading4"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-wordcloud'
import china from './map/json/china.json'
import { segmentation } from '@/api/communityOperating/customerPortrait.js'

export default {
  name: 'CustomerPortrait',
  data() {
    return {
      loading: false,
      loading2: false,
      loading3: false,
      loading4: false,
      activeValue: 1,
      activeName: 'first',
      radio1: '1',
      tableData: [],
      options1: [
        { value: 2, label: '月活' },
        { value: 1, label: '日活' }
      ],
      options: [
        {
          value: '1',
          label: '按天'
        },
        {
          value: '2',
          label: '自然周'
        },
        {
          value: '3',
          label: '自然月'
        },
        {
          value: '4',
          label: '自然年'
        }
      ],
      pickerOptions: {
        // shortcuts: [
        //   {
        //     text: "今日",
        //     onClick(picker) {
        //       const end = new Date();
        //       const start = new Date();
        //       // start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        //       picker.$emit("pick", [start, end]);
        //     },
        //   },
        //   {
        //     text: "昨日",
        //     onClick(picker) {
        //       const end = new Date();
        //       const start = new Date();
        //       start.setTime(start.getTime() - 3600 * 1000 * 24);
        //       picker.$emit("pick", [start, end]);
        //     },
        //   },
        //   {
        //     text: "上周",
        //     onClick(picker) {
        //       const end = new Date();
        //       const start = new Date();
        //       start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        //       picker.$emit("pick", [start, end]);
        //     },
        //   },
        //   {
        //     text: "最近一个月",
        //     onClick(picker) {
        //       const end = new Date();
        //       const start = new Date();
        //       start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        //       picker.$emit("pick", [start, end]);
        //     },
        //   },
        //   {
        //     text: "最近三个月",
        //     onClick(picker) {
        //       const end = new Date();
        //       const start = new Date();
        //       start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
        //       picker.$emit("pick", [start, end]);
        //     },
        //   },
        // ],
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      // 日期选择
      dataVal: '1',
      dataVal1: '1',
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      endDate: '',
      value11: '',
      value22: '',
      value33: '',
      value44: '',
      endDate1: '',
      dayStatus: true,
      weekStatus: false,
      monthStatus: false,
      yearStatus: false,
      dayStatus1: true,
      weekStatus1: false,
      monthStatus1: false,
      yearStatus1: false,
      // 日期选择
      // 男性标签
      femaleTable: [],
      // 女性标签
      maleTable: [],
      //险种偏好
      riskInfoData: [],
      //城市排名
      cityData: [],
      // 客户数量
      customerNum: {},
      infoId: '',
      chartDatas: {}
    }
  },

  methods: {
    init() {
    },
    async getSegmentation() {
      // // this.infoId = this.$route.query.infoId
      // const res = await segmentation({ infoId: this.infoId })
      // //  .then(res => {
      // if (res.code == 200) {
      //   // 后端给的 JSON 需要进行转换
      //   let keys = ['ageNew', 'ageStore', 'annualNew', 'annualStore', 'buyNew', 'buyStore', 'educationNew', 'educationStore', 'femaleLabel',
      //     'jobNew', 'jobStore', 'maleLabel', 'province', 'riskLike', 'sexNew', 'sexStore', 'city']
      //   // obj = {};
      //   keys.forEach(key => (this.chartDatas[key] = res.data && res.data[key] ? JSON.parse(res.data[key]) : []))
      //   console.log('segmentationsegmentation', this.chartDatas)
      //   this.queryPortraitGroupLabel()
      //   this.queryPortraitGroupSex()
      //   this.queryPortraitGroupRisk()
      // } else {
      //   this.$message.error(res.msg)
      // }
      // // })

      const getData = {
        "groupId": "D00000000000002",
        "femaleLabel": "[\n    {\n        \"label\": \"高消费\",\n        \"num\": \"4\"\n    },\n    {\n        \"label\": \"低活跃度\",\n        \"num\": \"45\"\n    },\n    {\n        \"label\": \"中等活跃度\",\n        \"num\": \"26\"\n    },\n    {\n        \"label\": \"低消费\",\n        \"num\": \"30\"\n    },\n    {\n        \"label\": \"中等消费\",\n        \"num\": \"36\"\n    },\n    {\n        \"label\": \"流失客户\",\n        \"num\": \"1\"\n    }\n]",
        "maleLabel": "[\n    {\n        \"label\": \"高消费\",\n        \"num\": \"6\"\n    },\n    {\n        \"label\": \"低活跃度\",\n        \"num\": \"56\"\n    },\n    {\n        \"label\": \"中等活跃度\",\n        \"num\": \"29\"\n    },\n    {\n        \"label\": \"低消费\",\n        \"num\": \"32\"\n    },\n    {\n        \"label\": \"中等消费\",\n        \"num\": \"43\"\n    },\n    {\n        \"label\": \"流失客户\",\n        \"num\": \"0\"\n    }\n]",
        "ageStore": "[\n    {\n        \"name\": \"18-24\",\n        \"value\": \"4.35\"\n    },\n    {\n        \"name\": \"25-30\",\n        \"value\": \"6.48\"\n    },\n    {\n        \"name\": \"31-35\",\n        \"value\": \"8.69\"\n    },\n    {\n        \"name\": \"36-40\",\n        \"value\": \"11.43\"\n    },\n    {\n        \"name\": \"41-45\",\n        \"value\": \"26.33\"\n    },\n    {\n        \"name\": \"46-50\",\n        \"value\": \"24.37\"\n    },\n    {\n        \"name\": \"51-55\",\n        \"value\": \"8.73\"\n    },\n    {\n        \"name\": \"56-60\",\n        \"value\": \"4.73\"\n    },\n    {\n        \"name\": \"61-65\",\n        \"value\": \"3.7\"\n    },\n    {\n        \"name\": \"65+\",\n        \"value\": \"1.19\"\n    }\n]",
        "ageNew": "[\n    {\n        \"name\": \"18-24\",\n        \"value\": \"4.35\"\n    },\n    {\n        \"name\": \"25-30\",\n        \"value\": \"6.48\"\n    },\n    {\n        \"name\": \"31-35\",\n        \"value\": \"8.69\"\n    },\n    {\n        \"name\": \"36-40\",\n        \"value\": \"11.43\"\n    },\n    {\n        \"name\": \"41-45\",\n        \"value\": \"26.33\"\n    },\n    {\n        \"name\": \"46-50\",\n        \"value\": \"24.37\"\n    },\n    {\n        \"name\": \"51-55\",\n        \"value\": \"8.73\"\n    },\n    {\n        \"name\": \"56-60\",\n        \"value\": \"4.73\"\n    },\n    {\n        \"name\": \"61-65\",\n        \"value\": \"3.7\"\n    },\n    {\n        \"name\": \"65+\",\n        \"value\": \"1.19\"\n    }\n]",
        "buyStore": "[\n    {\n        \"name\": \"高消费\",\n        \"value\": \"6.29\"\n    },\n    {\n        \"name\": \"中消费\",\n        \"value\": \"55.31\"\n    },\n    {\n        \"name\": \"低消费\",\n        \"value\": \"38.4\"\n    }\n]",
        "buyNew": "[\n    {\n        \"name\": \"高消费\",\n        \"value\": \"6.29\"\n    },\n    {\n        \"name\": \"中消费\",\n        \"value\": \"55.31\"\n    },\n    {\n        \"name\": \"低消费\",\n        \"value\": \"38.4\"\n    }\n]",
        "sexStore": "[\n  {\n    \"name\": \"女性占比\",\n    \"value\": \"53.45\"\n  },\n  {\n    \"name\": \"男性占比\",\n    \"value\": \"44.65\"\n  },\n  {\n    \"name\": \"未知性别占比\",\n    \"value\": \"1.9\"\n  }\n]",
        "sexNew": "[\n  {\n    \"name\": \"女性占比\",\n    \"value\": \"53.45\"\n  },\n  {\n    \"name\": \"男性占比\",\n    \"value\": \"44.65\"\n  },\n  {\n    \"name\": \"未知性别占比\",\n    \"value\": \"1.9\"\n  }\n]",
        "riskLike": "[\n  {\n    \"value\": \"重疾险\",\n    \"dealCount\": \"63\",\n    \"browse\": \"1801\"\n  },\n  {\n    \"value\": \"养老险\",\n    \"dealCount\": \"12\",\n    \"browse\": \"789\"\n  },\n  {\n    \"value\": \"意外险\",\n    \"dealCount\": \"8\",\n    \"browse\": \"899\"\n  },\n  {\n    \"value\": \"年金险\",\n    \"dealCount\": \"13\",\n    \"browse\": \"706\"\n  },\n  {\n    \"value\": \"医疗险\",\n    \"dealCount\": \"28\",\n    \"browse\": \"1206\"\n  },\n  {\n    \"value\": \"学平险\",\n    \"dealCount\": \"3\",\n    \"browse\": \"12\"\n  },\n  {\n    \"value\": \"传统寿险\",\n    \"dealCount\": \"22\",\n    \"browse\": \"128\"\n  },\n  {\n    \"value\": \" 其他\",\n    \"dealCount\": \"10\",\n    \"browse\": \"16\"\n  }\n]\n",
        "province": "[\n  {\n    \"name\": \"北京\",\n    \"value\": \"0\"\n  },\n  {\n    \"name\": \"天津\",\n    \"value\": \"0\"\n  },\n  {\n    \"name\": \"河北\",\n    \"value\": \"0\"\n  },\n  {\n    \"name\": \"山西\",\n    \"value\": \"0\"\n  },\n  {\n    \"name\": \"内蒙古\",\n    \"value\": \"0\"\n  },\n  {\n    \"name\": \"辽宁\",\n    \"value\": \"0\"\n  },\n  {\n    \"name\": \"吉林\",\n    \"value\": \"0\"\n  },\n  {\n    \"name\": \"黑龙江\",\n    \"value\": \"0\"\n  },\n  {\n    \"name\": \"上海\",\n    \"value\": \"0\"\n  },\n  {\n    \"name\": \"江苏\",\n    \"value\": \"137\"\n  },\n  {\n    \"name\": \"浙江\",\n    \"value\": \"0\"\n  },\n  {\n    \"name\": \"安徽\",\n    \"value\": \"8\"\n  },\n  {\n    \"name\": \"福建\",\n    \"value\": \"0\"\n  },\n  {\n    \"name\": \"江西\",\n    \"value\": \"0\"\n  },\n  {\n    \"name\": \"山东\",\n    \"value\": \"0\"\n  },\n  {\n    \"name\": \"河南\",\n    \"value\": \"0\"\n  },\n  {\n    \"name\": \"湖北\",\n    \"value\": \"0\"\n  },\n  {\n    \"name\": \"湖南\",\n    \"value\": \"0\"\n  },\n  {\n    \"name\": \"广东\",\n    \"value\": \"0\"\n  },\n  {\n    \"name\": \"广西\",\n    \"value\": \"0\"\n  },\n  {\n    \"name\": \"海南\",\n    \"value\": \"0\"\n  },\n  {\n    \"name\": \"四川\",\n    \"value\": \"0\"\n  },\n  {\n    \"name\": \"贵州\",\n    \"value\": \"0\"\n  },\n  {\n    \"name\": \"云南\",\n    \"value\": \"0\"\n  },\n  {\n    \"name\": \"西藏\",\n    \"value\": \"0\"\n  },\n  {\n    \"name\": \"陕西\",\n    \"value\": \"0\"\n  },\n  {\n    \"name\": \"甘肃\",\n    \"value\": \"0\"\n  },\n  {\n    \"name\": \"青海\",\n    \"value\": \"0\"\n  },\n  {\n    \"name\": \"宁夏\",\n    \"value\": \"0\"\n  },\n  {\n    \"name\": \"新疆\",\n    \"value\": \"0\"\n  },\n  {\n    \"name\": \"台湾\",\n    \"value\": \"0\"\n  },\n  {\n    \"name\": \"香港\",\n    \"value\": \"0\"\n  },\n  {\n    \"name\": \"澳门\",\n    \"value\": \"0\"\n  },\n  {\n    \"name\": \"重庆\",\n    \"value\": \"0\"\n  }\n]\n",
        "city": "[\n  {\n    \"name\": \"无锡市\",\n    \"value\": \"28.33%\"\n  },\n  {\n    \"name\": \"江阴市\",\n    \"value\": \"18.56%\"\n  },\n  {\n    \"name\": \"扬州市\",\n    \"value\": \"13.78%\"\n  },\n  {\n    \"name\": \"苏州\",\n    \"value\": \"11.65%\"\n  },\n  {\n    \"name\": \"南通市\",\n    \"value\": \"10.85%\"\n  },\n  {\n    \"name\": \"溧阳市\",\n    \"value\": \"6.65%\"\n  },\n  {\n    \"name\": \"昆山市\",\n    \"value\": \"5.33%\"\n  },\n  {\n    \"name\": \"芜湖市\",\n    \"value\": \"2.1%\"\n  },\n  {\n    \"name\": \"淮安市\",\n    \"value\": \"1.85%\"\n  },\n  {\n    \"name\": \"宜兴市\",\n    \"value\": \"0.9%\"\n  }\n]\n",
        "jobNew": "[\n  {\n    \"name\": \"医生\",\n    \"value\": \"1.2\"\n  },\n  {\n    \"name\": \"法医\",\n    \"value\": \"0\"\n  },\n  {\n    \"name\": \"内勤\",\n    \"value\": \"26.56\"\n  },\n  {\n    \"name\": \"教师\",\n    \"value\": \"4.76\"\n  },\n  {\n    \"name\": \"其他\",\n    \"value\": \"67.48\"\n  }\n]\n",
        "jobStore": "[\n  {\n    \"name\": \"医生\",\n    \"value\": \"1.2\"\n  },\n  {\n    \"name\": \"法医\",\n    \"value\": \"0\"\n  },\n  {\n    \"name\": \"内勤\",\n    \"value\": \"26.56\"\n  },\n  {\n    \"name\": \"教师\",\n    \"value\": \"4.76\"\n  },\n  {\n    \"name\": \"其他\",\n    \"value\": \"67.48\"\n  }\n]\n",
        "educationNew": "[\n  {\n    \"name\": \"小学\",\n    \"value\": \"16.98\"\n  },\n  {\n    \"name\": \"中专\",\n    \"value\": \"3.96\"\n  },\n  {\n    \"name\": \"高中\",\n    \"value\": \"23.84\"\n  },\n  {\n    \"name\": \"本科\",\n    \"value\": \"38.75\"\n  },\n  {\n    \"name\": \"硕士\",\n    \"value\": \"4.79\"\n  },\n  {\n    \"name\": \"博士\",\n    \"value\": \"0.16\"\n  },\n  {\n    \"name\": \"其他\",\n    \"value\": \"11.52\"\n  }\n]\n",
        "educationStore": "[\n  {\n    \"name\": \"小学\",\n    \"value\": \"16.98\"\n  },\n  {\n    \"name\": \"中专\",\n    \"value\": \"3.96\"\n  },\n  {\n    \"name\": \"高中\",\n    \"value\": \"23.84\"\n  },\n  {\n    \"name\": \"本科\",\n    \"value\": \"38.75\"\n  },\n  {\n    \"name\": \"硕士\",\n    \"value\": \"4.79\"\n  },\n  {\n    \"name\": \"博士\",\n    \"value\": \"0.16\"\n  },\n  {\n    \"name\": \"其他\",\n    \"value\": \"11.52\"\n  }\n]\n",
        "annualNew": "[\n  {\n    \"name\": \"10万以下\",\n    \"value\": \"22.64\"\n  },\n  {\n    \"name\": \"20万-30万\",\n    \"value\": \"40.97\"\n  },\n  {\n    \"name\": \"30万-50万\",\n    \"value\": \"21.74\"\n  },\n  {\n    \"name\": \"50万-80万\",\n    \"value\": \"6.83\"\n  },\n  {\n    \"name\": \"80万-100万\",\n    \"value\": \"4.83\"\n  },\n  {\n    \"name\": \"其他\",\n    \"value\": \"2.99\"\n  }\n]",
        "annualStore": "[\n  {\n    \"name\": \"10万以下\",\n    \"value\": \"22.64\"\n  },\n  {\n    \"name\": \"20万-30万\",\n    \"value\": \"40.97\"\n  },\n  {\n    \"name\": \"30万-50万\",\n    \"value\": \"21.74\"\n  },\n  {\n    \"name\": \"50万-80万\",\n    \"value\": \"6.83\"\n  },\n  {\n    \"name\": \"80万-100万\",\n    \"value\": \"4.83\"\n  },\n  {\n    \"name\": \"其他\",\n    \"value\": \"2.99\"\n  }\n]",
        "createBy": "admin",
        "createTime": "2023-11-02T00:00:00.000+08:00",
        "updateBy": "admin",
        "updateTime": "2023-11-02T00:00:00.000+08:00",
        "dataTime": null
      }
      let keys = ['ageNew', 'ageStore', 'annualNew', 'annualStore', 'buyNew', 'buyStore', 'educationNew', 'educationStore', 'femaleLabel',
        'jobNew', 'jobStore', 'maleLabel', 'province', 'riskLike', 'sexNew', 'sexStore', 'city']
      // obj = {};
      keys.forEach(key => (this.chartDatas[key] = getData && getData[key] ? JSON.parse(getData[key]) : []))
      console.log('segmentationsegmentation', this.chartDatas)
      window.setTimeout(() => {
        this.queryPortraitGroupLabel()
        this.queryPortraitGroupSex()
        this.queryPortraitGroupRisk()
      },100)
    },
    testOne(femaleData) {
      var mycharts = echarts.init(document.getElementById('manBox'))
      //用来存储数据
      var jsonlist = femaleData
      console.log('jsonlist', jsonlist)
      // jsonlist.push();
      // 人像的base64编码
      let image1 =
        ''
      var maskResource = new Image()
      maskResource.crossOrigin = ''
      maskResource.src = image1
      // console.log('maskResource', maskResource);
      var option = {
        tooltip: {},
        series: [
          {
            maskImage: maskResource,
            //词的类型
            type: 'wordCloud',
            //设置字符大小范围
            sizeRange: [12, 26],
            rotationRange: [-45, 90],
            gridSize: -200, // 单词之间的间隔大小
            // shape: "cardioid", // 词云的形状，可选值有
            // cardioid心形,diamond菱形,square正方形,triangle-forward指向右边的三角形,triangle-upright正三角形
            // triangle三角形，pentagon五角形，star五角星形，

            //不要忘记调用数据
            data: jsonlist,
            textStyle: {
              // normal: {
              //生成随机的字体颜色
              color: function() {
                return (
                  'rgb(' +
                  [
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160)
                  ].join(',') +
                  ')'
                )
              }
              // },
            }
          }
        ]
      }
      //加载图像，将数据放在图像中
      maskResource.onload = function() {
        mycharts.setOption(option)
      }
    },
    testTwo(maleDate) {
      var mycharts = echarts.init(document.getElementById('womanBox'))
      //用来存储数据
      var jsonlist = maleDate

      // 人像的base64编码
      let image1 =
        ''
      var maskResource = new Image()
      maskResource.src = image1
      var option = {
        //设置标题，居中显示
        //   title: {
        //     text: "词云示例",
        //     left: "center",
        //   },
        //数据可以点击
        tooltip: {},
        series: [
          {
            maskImage: maskResource,
            //词的类型
            type: 'wordCloud',
            //设置字符大小范围
            sizeRange: [12, 26],
            rotationRange: [-45, 90],
            gridSize: -200, // 单词之间的间隔大小
            // shape: "cardioid", // 词云的形状，可选值有
            // cardioid心形,diamond菱形,square正方形,triangle-forward指向右边的三角形,triangle-upright正三角形
            // triangle三角形，pentagon五角形，star五角星形，

            //不要忘记调用数据
            data: jsonlist,
            textStyle: {
              // normal: {
              //生成随机的字体颜色
              color: function() {
                return (
                  'rgb(' +
                  [
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160)
                  ].join(',') +
                  ')'
                )
              }
              // },
            }
          }
        ]
      }
      //加载图像，将数据放在图像中
      maskResource.onload = function() {
        mycharts.setOption(option)
      }
    },
    getChartOne(sexData) {
      var mycharts = echarts.init(document.getElementById('chartOne'))
      var option = {
        title: [
          {
            text: '客户性别分布',
            top: '50%',
            textAlign: 'center',
            left: '49%',
            textStyle: {
              color: '#2A2A2A',
              fontSize: 14,
              fontWeight: '700',
              fontFamily: 'PangMenZhengDao'
            }
          },
          {
            text: '性别分布',
            top: '5%',
            textAlign: 'center',
            left: '10%',
            textStyle: {
              color: '#393B44 ',
              fontSize: 14,
              fontWeight: '700',
              fontFamily: 'PangMenZhengDao'
            }
          }
        ],
        color: ['#FFAD3A', '#082aff', '#FAC8BC'],
        tooltip: {
          trigger: 'item',
          textStyle: { fontSize: 16 },
          formatter: '{b}\n{c}% '
        },
        // legend: { textStyle: { color: "#ffffff" }, show: false },
        legend: {
          // top: 'center',
          bottom: 0,
          left: '0%',
          show: false,
          // top: '10%',
          orient: 'vertical'
        },
        series: {
          type: 'pie',
          center: ['50%', '50%'],
          radius: ['40%', '60%'],
          showEmptyCircle: true,
          label: { formatter: '{b}\n{c}% ', color: '#082aff ', fontSize: 14 },
          data: sexData,
          labelLine: {
            lineStyle: {
              type: 'dashed',
              color: '#CCCCCC'
            }
          }
        }
      }
      mycharts.setOption(option)
    },

    getChartTwo(ageData) {
      var mycharts = echarts.init(document.getElementById('chartTwo'))
      var option = {
        title: [
          {
            text: '客户年龄分布',
            top: '50%',
            textAlign: 'center',
            left: '49%',
            textStyle: {
              color: '#2A2A2A',
              fontSize: 14,
              fontWeight: '700',
              fontFamily: 'PangMenZhengDao'
            }
          },
          {
            text: '年龄分布',
            top: '5%',
            textAlign: 'center',
            left: '10%',
            textStyle: {
              color: '#393B44 ',
              fontSize: 14,
              fontWeight: '700',
              fontFamily: 'PangMenZhengDao'
            }
          }
        ],
        color: [
          '#FC876A',
          '#082aff',
          '#FFF3EB',
          '#FFE5D3',
          '#FAC8BC',
          '#FFBAA2',
          '#FFAD3A',
          '#FFE8C9',
          '#FFD08E',
          '#FC9238'
        ],
        tooltip: {
          trigger: 'item',
          textStyle: { fontSize: 16 },
          formatter: '{b}\n{c}% '
        },
        // legend: {textStyle: {color: "#ffffff"}, show: false},
        legend: {
          // top: 'center',
          bottom: 0,
          left: '0%',
          show: false,
          // top: '20%',
          orient: 'vertical'
        },
        series: {
          type: 'pie',
          center: ['50%', '50%'],
          radius: ['40%', '60%'],
          showEmptyCircle: true,
          label: { formatter: '{b}\n{c}% ', color: '#082aff ', fontSize: 14 },
          data: ageData,
          labelLine: {
            lineStyle: {
              type: 'dashed',
              color: '#CCCCCC'
            }
          }
        }
      }
      mycharts.setOption(option)
    },
    getChartThree(buyData) {
      var mycharts = echarts.init(document.getElementById('chartThree'))
      var option = {
        title: [
          {
            text: '客户购买能力',
            top: '50%',
            textAlign: 'center',
            left: '49%',
            textStyle: {
              color: '#2A2A2A',
              fontSize: 14,
              fontWeight: '700',
              fontFamily: 'PangMenZhengDao'
            }
          },
          {
            text: '购买能力',
            top: '5%',
            textAlign: 'center',
            left: '10%',
            textStyle: {
              color: '#393B44 ',
              fontSize: 14,
              fontWeight: '700',
              fontFamily: 'PangMenZhengDao'
            }
          }
        ],
        color: ['#FFAD3A', '#FFE8C9', '#FFD08E'],
        tooltip: {
          trigger: 'item',
          textStyle: { fontSize: 16 },
          formatter: '{b}\n{c}% '
        },
        // legend: {textStyle: {color: "#ffffff"}, show: false},
        legend: {
          // top: 'center',
          bottom: 0,
          left: '0%',
          show: false,
          // top: '10%',
          orient: 'vertical'
        },
        series: {
          type: 'pie',
          center: ['50%', '50%'],
          radius: ['40%', '60%'],
          showEmptyCircle: true,

          label: { formatter: '{b}\n{c}%', color: '#082aff ', fontSize: 14 },
          data: buyData,
          labelLine: {
            lineStyle: {
              type: 'dashed',
              color: '#CCCCCC'
            }
          }
        }
      }
      mycharts.setOption(option)
    },

    getChartFour(dealCount, browse) {
      var chartDom = document.getElementById('chartFour')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        // title: {
        //   text: "险种趋势",
        // },

        color: ['#FB582F', '#FFAD3A'],
        legend: {
          data: ['成交', '浏览'],
          top: 20,
          right: 20
        },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: '重疾险', max: 2000 },
            { name: '养老险', max: 2000 },
            { name: '意外险', max: 2000 },
            { name: '年金险', max: 2000 },
            { name: '医疗险', max: 2000 },
            { name: '学平险', max: 2000 },
            { name: '传统寿险', max: 2000 },
            { name: '其他', max: 2000 },
          ],
          name: {
            // 修饰雷达图文字的颜色
            textStyle: {
              color: '#505050'
            }
          },
          splitArea: {
            show: false,
            areaStyle: {
              color: 'rgba(255,0,0,0)' // 图表背景的颜色
            }
          },
          splitLine: {
            //配置雷达图的每一圈的网格线颜色
            lineStyle: {
              color: '#ccc'
            }
          },
          // 坐标轴的线修改为白色半透明
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0)'
            }
          }
        },

        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: dealCount,
                name: '成交',
                areaStyle: {
                  color: 'rgba(255,173,58,0.05)'
                }
              },
              {
                value: browse,
                name: '浏览',
                areaStyle: {
                  color: 'rgba(252,88,48,0.05)'
                }
              }
            ]
          }
        ]
      }

      option && myChart.setOption(option)
    },
    getChartFive(time, num) {
      var mycharts = echarts.init(document.getElementById('chartFive'))
      var option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: { data: ['客户数量'], left: '85%' },
        xAxis: {
          type: 'category',
          data: time,
          axisLabel: {
            interval: 0,
            rotate: time.length > 14 ? 45 : 0
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '客户数量',
            data: num,
            type: 'line',
            showSymbol: false,
            smooth: true,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(244,93,55,0.06)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(249,89,50,0)'
                    }
                  ],
                  false
                ),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            dataZoom: [
              {
                type: 'slider',
                startValue: 0,
                handleIcon:
                  'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                handleSize: '100%',
                handleStyle: {
                  color: '#0B3C6F',
                  shadowBlur: 3,
                  shadowColor: 'rgba(0, 0, 0, 0.6)',
                  shadowOffsetX: 2,
                  shadowOffsetY: 2
                },
                show: time.length > 100 ? true : false,
                bottom: '0px'
              }
            ],
            itemStyle: {
              normal: {
                color: '#082aff',
                borderColor: 'rgba(255,207,118,0.27)',
                borderWidth: 12
              }
            }
          }
        ]
      }
      mycharts.setOption(option)
    },
    getChartSix(time, num) {
      var mycharts = echarts.init(document.getElementById('chartSix'))
      var option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: [this.activeValue === 1 ? '日活用户数' : '月活用户数'],
          left: '85%'
        },
        xAxis: {
          type: 'category',
          data: time,
          axisLabel: {
            interval: 0,
            rotate: time.length > 14 ? 45 : 0,
            // interval: 3
          }
        },
        yAxis: {
          type: 'value'
        },

        dataZoom: [
          {
            type: 'slider',
            startValue: 0,
            handleIcon:
              'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '100%',
            handleStyle: {
              color: '#0B3C6F',
              shadowBlur: 3,
              shadowColor: 'rgba(0, 0, 0, 0.6)',
              shadowOffsetX: 2,
              shadowOffsetY: 2
            },
            show: time.length > 100 ? true : false,
            bottom: '0px'
          }
        ],

        series: [
          {
            name: this.activeValue === 1 ? '日活用户数' : '月活用户数',
            data: num,
            type: 'line',
            smooth: true,
            showSymbol: false,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(244,208,55,0.06)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(249,89,50,0)'
                    }
                  ],
                  false
                ),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: '#FEAC39',
                borderColor: 'rgba(255,207,118,0.27)',
                borderWidth: 12
              }
            }
          }
        ]
      }
      mycharts.setOption(option)
    },
    getChartSeven(provinceList) {
      var chartDom = document.getElementById('chartSeven')
      var myChart = echarts.init(chartDom)
      echarts.registerMap('china', china)

      var nameColor = ' rgb(55, 75, 113)'
      var name_fontFamily = '等线'
      var subname_fontSize = 15
      var name_fontSize = 18
      var mapName = 'china'
      var data = provinceList

      var geoCoordMap = {}

      /*获取地图数据*/
      myChart.showLoading()
      var mapFeatures = echarts.getMap(mapName).geoJson.features
      myChart.hideLoading()
      console.log(mapFeatures, 'mapFeatures')
      mapFeatures.forEach(function(v) {
        // 地区名称
        var name = v.properties.name
        // 地区经纬度
        geoCoordMap[name] = v.properties.cp
      })

      var convertData = function(data) {
        var res = []
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name]
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            })
          }
          return res
        }
      }
      //console.log( convertData(data))

      var option = {
        title: {
          x: 'center',
          textStyle: {
            color: nameColor,
            fontFamily: name_fontFamily,
            fontSize: name_fontSize
          },
          subtextStyle: {
            fontSize: subname_fontSize,
            fontFamily: name_fontFamily
          }
        },

        visualMap: {
          show: true,
          min: 0,
          max: 200,
          left: 'right',
          top: 'bottom',
          text: ['高', '低'], // 文本，默认为数值文本
          seriesIndex: [1],
          calculable: true,
          inRange: {
            color: ['#EBEEFF', '#082aff'] // 蓝黑
          }
        },

        geo: {
          show: true,
          map: mapName,
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          // roam: true,
          itemStyle: {
            normal: {
              areaColor: '#031525',
              borderColor: '#3B5077'
            },
            emphasis: {
              areaColor: '#2B91B7'
            }
          }
        },
        series: [
          {
            name: '散点',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(data),
            symbolSize: function(val) {
              return val[2] / 10
            },
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: true
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: '#05C3F9'
              }
            }
          },
          {
            type: 'map',
            map: mapName,
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: '#fff'
                }
              }
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: '#031525',
                borderColor: '#3B5077'
              },
              emphasis: {
                areaColor: '#2B91B7'
              }
            },
            animation: false,
            data: data
          }
        ]
      }
      option && myChart.setOption(option)
    },

    getChartEight(data) {
      let mycharts = echarts.init(document.getElementById('chartEight'))
      let option = {
        title:
          {
            text: '职业分布',
            top: '5%',
            textAlign: 'center',
            left: '10%',
            textStyle: {
              color: '#393B44 ',
              fontSize: 14,
              fontWeight: '700',
              fontFamily: 'PangMenZhengDao'
            }
          },
        tooltip: {
          trigger: 'item',
          textStyle: { fontSize: 16 },
          formatter: '{b}\n{c}% '
        },
        // legend: {
        //   show: false,
        //   orient: 'vertical',
        //   left: 'left'
        // },
        legend: {
          // top: 'center',
          bottom: 0,
          left: '0%',
          show: false,
          // top: '10%',
          orient: 'vertical'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            label: { formatter: '{b}\n{c}%', color: '#082aff ', fontSize: 14 },
            data,
            emphasis: {
              itemStyle: {
                show: false,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ],
        labelLine: {
          lineStyle: {
            type: 'dashed',
            color: '#CCCCCC'
          }
        }
      }
      mycharts.setOption(option)
    },

    getChartRang(id, data, opts) {
      let mycharts = echarts.init(document.getElementById(id))
      let option = {
        title: [
          {
            text: opts.title[0],
            top: '5%',
            textAlign: 'center',
            left: '10%',
            textStyle: {
              color: '#393B44 ',
              fontSize: 14,
              fontWeight: '700',
              fontFamily: 'PangMenZhengDao'
            }
          },
          {
            text: opts.title[1],
            top: '50%',
            textAlign: 'center',
            left: '49%',
            textStyle: {
              color: '#2A2A2A',
              fontSize: 14,
              fontWeight: '700',
              fontFamily: 'PangMenZhengDao'
            }
          }
        ],
        color: ['#5087EC',
          '#68BBC3',
          '#FFF3EB',
          '#58A55D',
          '#F2BD43',
          '#FFBAA2',
          '#EE762F',
          '#D95040',
          '#5087EC'],
        tooltip: {
          trigger: 'item',
          textStyle: { fontSize: 16 },
          formatter: '{b}\n{c}% '
        },
        // legend: {textStyle: {color: "#ffffff"}, show: false},
        legend: {
          // top: 'center',
          bottom: 0,
          left: '0%',
          show: false,
          // top: '10%',
          orient: 'vertical'
        },
        series: {
          type: 'pie',
          center: ['50%', '50%'],
          radius: ['40%', '60%'],
          showEmptyCircle: true,
          label: { formatter: '{b}\n{c}% ', color: '#082aff ', fontSize: 14 },
          data,
          labelLine: {
            lineStyle: {
              type: 'dashed',
              color: '#CCCCCC'
            }
          }
        }
      }
      mycharts.setOption(option)
    },
    // 下拉框change事件
    changeVal() {
      this.value1 = ''
      this.value2 = ''
      this.value3 = ''
      this.value4 = ''
      this.endDate = ''
      if (this.dataVal === '1') {
        this.dayStatus = true
        this.weekStatus = false
        this.monthStatus = false
        this.yearStatus = false
      } else if (this.dataVal === '2') {
        this.dayStatus = false
        this.weekStatus = true
        this.monthStatus = false
        this.yearStatus = false
      } else if (this.dataVal === '3') {
        this.dayStatus = false
        this.weekStatus = false
        this.monthStatus = true
        this.yearStatus = false
      } else if (this.dataVal === '4') {
        this.dayStatus = false
        this.weekStatus = false
        this.monthStatus = false
        this.yearStatus = true
      }
    },
    changeVal1() {
      this.value11 = ''
      this.value22 = ''
      this.value33 = ''
      this.value44 = ''
      this.endDate1 = ''
      if (this.dataVal1 === '1') {
        this.dayStatus1 = true
        this.weekStatus1 = false
        this.monthStatus1 = false
        this.yearStatus1 = false
      } else if (this.dataVal1 === '2') {
        this.dayStatus1 = false
        this.weekStatus1 = true
        this.monthStatus1 = false
        this.yearStatus1 = false
      } else if (this.dataVal1 === '3') {
        this.dayStatus1 = false
        this.weekStatus1 = false
        this.monthStatus1 = true
        this.yearStatus1 = false
      } else if (this.dataVal1 === '4') {
        this.dayStatus1 = false
        this.weekStatus1 = false
        this.monthStatus1 = false
        this.yearStatus1 = true
      }
    },
    // 日期框change事件
    changeDates() {
      if (this.dataVal === '4') {
        if (this.value4 && this.endDate) {
          this.queryPortraitGroupCount()
        }
      } else {
        this.queryPortraitGroupCount()
      }
    },
    // 客群标签查询
    async queryPortraitGroupLabel() {
      let fn = data => {
        let femaleData = []
        let maleDate = []
        this.femaleTable = data.feMaleLabelValueResDTOList
        this.maleTable = data.maleLabelValueResDTOList
        data.feMaleLabelValueResDTOList.forEach((item) => {
          femaleData.push({ name: item.label, value: item.num })
        })
        data.maleLabelValueResDTOList.forEach((item) => {
          maleDate.push({ name: item.label, value: Number(item.num) })
        })
        this.loading = false
        console.log(femaleData)
        this.testOne(femaleData)
        this.testTwo(maleDate)
      }
      this.loading = true
      if (this.infoId) {
        fn({
          feMaleLabelValueResDTOList: this.chartDatas.femaleLabel,
          maleLabelValueResDTOList: this.chartDatas.maleLabel
        })
      } else {
        // const res = await queryPortraitGroupLabel();
        // if (res.code === 200) {
        //   fn(res.data)
        // }
        const getData = {
          'maleLabelValueResDTOList': [
            {
              'label': '高消费',
              'num': '6'
            },
            {
              'label': '低活跃度',
              'num': '56'
            },
            {
              'label': '中等活跃度',
              'num': '29'
            },
            {
              'label': '低消费',
              'num': '32'
            },
            {
              'label': '中等消费',
              'num': '43'
            },
            {
              'label': '流失客户',
              'num': '0'
            }
          ],
          'feMaleLabelValueResDTOList': [
            {
              'label': '高消费',
              'num': '4'
            },
            {
              'label': '低活跃度',
              'num': '45'
            },
            {
              'label': '中等活跃度',
              'num': '26'
            },
            {
              'label': '低消费',
              'num': '30'
            },
            {
              'label': '中等消费',
              'num': '36'
            },
            {
              'label': '流失客户',
              'num': '1'
            }
          ]
        }
        fn(getData)
      }
    },
    // 险种和地域查询
    async queryPortraitGroupRisk() {
      let fn = data => {
        let dealCount = [] //图表数据
        let browse = [] //图表数据
        this.riskInfoData = data.riskInfoResDTOList
        data.cityList.forEach((item, index) => {
          item.rank = index + 1
        })
        data.riskInfoResDTOList.forEach((item) => {
          dealCount.push(item.dealCount)
          browse.push(item.browse)
        })
        this.loading = false
        console.log(dealCount, browse)
        console.log('data', data)
        this.cityData = data.cityList
        this.getChartFour(dealCount, browse)
        this.getChartSeven(data.provinceList)
      }
      this.loading = true
      if (this.infoId) {
        // this.getChartFour(dealCount, browse);
        // this.getChartSeven(this.chartDatas.province);
        // this.cityData = this.chartDatas.city;
        fn({
          riskInfoResDTOList: this.chartDatas.riskLike,
          provinceList: this.chartDatas.province,
          cityList: this.chartDatas.city
        })
      } else {
        // const res = await queryPortraitGroupRisk();
        // if (res.code === 200) {
        //   fn(res.data)
        // }
        let getData = {
          'riskInfoResDTOList': [
            {
              'value': '重疾险',
              'dealCount': '63',
              'browse': '1801'
            },
            {
              'value': '养老险',
              'dealCount': '12',
              'browse': '789'
            },
            {
              'value': '意外险',
              'dealCount': '8',
              'browse': '899'
            },
            {
              'value': '年金险',
              'dealCount': '13',
              'browse': '706'
            },
            {
              'value': '医疗险',
              'dealCount': '28',
              'browse': '1206'
            },
            {
              'value': '学平险',
              'dealCount': '3',
              'browse': '12'
            },
            {
              'value': '传统寿险',
              'dealCount': '22',
              'browse': '128'
            },
            {
              'value': '其他',
              'dealCount': '10',
              'browse': '16'
            }
          ],
          'provinceList': [
            {
              'name': '北京',
              'value': '0'
            },
            {
              'name': '天津',
              'value': '0'
            },
            {
              'name': '河北',
              'value': '0'
            },
            {
              'name': '山西',
              'value': '0'
            },
            {
              'name': '内蒙古',
              'value': '0'
            },
            {
              'name': '辽宁',
              'value': '0'
            },
            {
              'name': '吉林',
              'value': '0'
            },
            {
              'name': '黑龙江',
              'value': '0'
            },
            {
              'name': '上海',
              'value': '0'
            },
            {
              'name': '江苏',
              'value': '137'
            },
            {
              'name': '浙江',
              'value': '0'
            },
            {
              'name': '安徽',
              'value': 8
            },
            {
              'name': '福建',
              'value': '0'
            },
            {
              'name': '江西',
              'value': '0'
            },
            {
              'name': '山东',
              'value': '0'
            },
            {
              'name': '河南',
              'value': '0'
            },
            {
              'name': '湖北',
              'value': '0'
            },
            {
              'name': '湖南',
              'value': '0'
            },
            {
              'name': '广东',
              'value': '0'
            },
            {
              'name': '广西',
              'value': '0'
            },
            {
              'name': '海南',
              'value': '0'
            },
            {
              'name': '四川',
              'value': '0'
            },
            {
              'name': '贵州',
              'value': '0'
            },
            {
              'name': '云南',
              'value': '0'
            },
            {
              'name': '西藏',
              'value': '0'
            },
            {
              'name': '陕西',
              'value': '0'
            },
            {
              'name': '甘肃',
              'value': '0'
            },
            {
              'name': '青海',
              'value': '0'
            },
            {
              'name': '宁夏',
              'value': '0'
            },
            {
              'name': '新疆',
              'value': '0'
            },
            {
              'name': '台湾',
              'value': '0'
            },
            {
              'name': '香港',
              'value': '0'
            },
            {
              'name': '澳门',
              'value': '0'
            },
            {
              'name': '重庆',
              'value': '0'
            }
          ],
          'cityList': [
            { name: '无锡市', value: '28.33%' },
            { name: '江阴市', value: '18.56%' },
            { name: '扬州市', value: '13.78%' },
            { name: '苏州市', value: '11.65%' },
            { name: '南通市', value: '10.85%' },
            { name: '溧阳市', value: '6.65%' },
            { name: '昆山市', value: '5.33%' },
            { name: '芜湖市', value: '2.1%' },
            { name: '淮安市', value: '1.85%' },
            { name: '宜兴市', value: '0.9%' }
          ]
        }
        fn(getData)
      }
    },
    // 客户数量查询
    async queryPortraitGroupCount() {
      // this.loading3 = true;
      // let obj = {flag: 1, infoId: this.infoId};
      // if (this.dataVal === "1") {
      //   obj.dateType = "DAY";
      //   obj.startDate = this.value1[0];
      //   obj.endDate = this.value1[1];
      // } else if (this.dataVal === "2") {
      //   console.log(this.value2);
      //   obj.dateType = "DAY";
      //   obj.startDate = this.value2;
      //   obj.endDate = this.timeChange(this.value2, "DAY");
      // } else if (this.dataVal === "3") {
      //   console.log(this.value3);
      //   obj.dateType = "MONTH";
      //   obj.startDate = this.value3[0];
      //   obj.endDate = this.value3[1];
      // } else if (this.dataVal === "4") {
      //   obj.dateType = "YEAR";
      //   obj.startDate = this.value4;
      //   obj.endDate = this.endDate;
      // }
      // console.log(obj);
      //
      // let axiosObj = {
      //   queryPortraitGroupCount,
      //   queryPortraitGroupCountSelf,
      // }
      //
      // const res = await axiosObj[`queryPortraitGroupCount${this.infoId ? 'Self' : ''}`](obj);
      // if (res.code === 200) {
      //   this.customerNum = res.data;
      //   let time = [];
      //   let num = [];
      //   res.data.customerInfoResDTOList.forEach((item) => {
      //     time.push(item.theDate);
      //     num.push(item.count);
      //   });
      //
      //   this.getChartFive(time, num);
      // }
      const getData = {
        'newCustomer': '35',
        'newCustomerPro': '22.01%',
        'oldCustomer': '124',
        'oldCustomerPro': '77.99%',
        'talkTime': '00:11:09',
        'customerInfoResDTOList': [
          {
            'theDate': '2024-04-24',
            'count': '21'
          },
          {
            'theDate': '2024-04-25',
            'count': '16'
          },
          {
            'theDate': '2024-04-26',
            'count': '18'
          },
          {
            'theDate': '2024-04-27',
            'count': '26'
          },
          {
            'theDate': '2024-04-28',
            'count': '24'
          },
          {
            'theDate': '2024-04-29',
            'count': '21'
          },
          {
            'theDate': '2024-04-30',
            'count': '33'
          }
        ]
      }
      this.customerNum = getData
      let time = []
      let num = []
      getData.customerInfoResDTOList.forEach((item) => {
        time.push(item.theDate)
        num.push(item.count)
      })
      window.setTimeout(() => {
        this.getChartFive(time, num)
      }, 100)
    },
    // 客户活跃
    async queryPortraitGroupActive() {
      // this.loading4 = true
      // let obj = { flag: this.activeValue, infoId: this.infoId }
      // // let obj = {};
      // if (this.dataVal1 === '1') {
      //   obj.dateType = 'DAY'
      //   obj.startDate = this.value11[0]
      //   obj.endDate = this.value11[1]
      // } else if (this.dataVal1 === '2') {
      //   console.log(this.value22)
      //   obj.dateType = 'DAY'
      //   obj.startDate = parseTime(new Date(new Date(this.value22).getTime() - 24 * 60 * 60 * 1000), '{y}-{m}-{d}')
      //   obj.endDate = parseTime(new Date(new Date(this.value22).getTime() + 5 * 24 * 60 * 60 * 1000), '{y}-{m}-{d}')
      // } else if (this.dataVal1 === '3') {
      //   obj.dateType = 'MONTH'
      //   obj.startDate = this.value33[0]
      //   obj.endDate = this.value33[1]
      // } else if (this.dataVal1 === '4') {
      //   obj.dateType = 'YEAR'
      //   obj.startDate = this.value44
      //   obj.endDate = this.endDate1
      //   // obj.endDate = new Date(this.value44).getFullYear() + 1;
      // }
      // console.log(obj)
      //
      // let axiosObj = {
      //   queryPortraitGroupActive,
      //   queryPortraitGroupActiveSelf
      // }
      //
      // if (this.dataVal1 === '4') {
      //   if (this.value44 && this.endDate1) {
      //     var res = await axiosObj[`queryPortraitGroupActive${this.infoId ? 'Self' : ''}`](obj)
      //   }
      // } else {
      //   var res = await axiosObj[`queryPortraitGroupActive${this.infoId ? 'Self' : ''}`](obj)
      // }
      //
      // console.log(res)
      // if (res && res.code === 200) {
      //   this.customerNum = res.data
      //   let time = []
      //   let num = []
      //   res.data.customerActiveResDTOList.forEach((item) => {
      //     time.push(item.theDate)
      //     num.push(item.count)
      //   })
      //
      //   this.getChartSix(time, num)
      // }
      // this.loading4 = false

      //  const res= await queryPortraitGroupActive()
      const getData = {
        'customerActiveResDTOList': [
          {
            'theDate': '2024-04-24',
            'count': '4'
          },
          {
            'theDate': '2024-04-25',
            'count': '2'
          },
          {
            'theDate': '2024-04-26',
            'count': '5'
          },
          {
            'theDate': '2024-04-27',
            'count': '8'
          },
          {
            'theDate': '2024-04-28',
            'count': '7'
          },
          {
            'theDate': '2024-04-29',
            'count': '6'
          },
          {
            'theDate': '2024-04-30',
            'count': '11'
          }
        ]
      }
      let time = []
      let num = []
      getData.customerActiveResDTOList.forEach((item) => {
        time.push(item.theDate)
        num.push(item.count)
      })
      window.setTimeout(() => {
        this.getChartSix(time, num)
      }, 100)
    },
    // 客群分布
    async queryPortraitGroupSex() {
      let fn = data => {
        // data.sexListProList.forEach((item) => {
        //   item.value = (item.value * 100).toFixed(2);
        // });
        // data.buyListProList.forEach((item) => {
        //   item.value = (item.value * 100).toFixed(2);
        // });
        this.getChartOne(data.sexListProList)
        this.getChartTwo(data.ageListProList)
        this.getChartThree(data.buyListProList)
        console.log(data, '=====')
      }
      this.loading2 = true
      if (this.infoId) {
        fn({
          sexListProList: this.chartDatas[this.radio1 == 1 ? 'sexStore' : 'sexNew'],
          ageListProList: this.chartDatas[this.radio1 == 1 ? 'ageStore' : 'ageNew'],
          buyListProList: this.chartDatas[this.radio1 == 1 ? 'buyStore' : 'buyNew']
        })

        // .map(item => { item.value = (item.value * 100).toFixed(2); return item })
        this.getChartEight(this.chartDatas[this.radio1 == 1 ? 'jobStore' : 'jobNew'])
        // .map(item => { item.value = (item.value * 100).toFixed(2); return item })
        this.getChartRang('chartTen', this.chartDatas[this.radio1 == 1 ? 'annualStore' : 'annualNew'], { title: ['年收入'] })
        // .map(item => { item.value = (item.value * 100).toFixed(2); return item })
        this.getChartRang('chartNine', this.chartDatas[this.radio1 == 1 ? 'educationStore' : 'educationNew'], { title: ['学历分布'] })

      } else {
        // const res = await queryPortraitGroupSex({flag: this.radio1});
        // if (res.code === 200) {
        //   fn(res.data)
        // }
        let getData = {
          'sexListProList': [
            {
              'name': '女性占比',
              'value': '53.45'
            },
            {
              'name': '男性占比',
              'value': '44.65'
            },
            {
              'name': '未知性别占比',
              'value': '1.9'
            }
          ],
          'buyListProList': [
            {
              'name': '高消费',
              'value': '6.29'
            },
            {
              'name': '中消费',
              'value': '55.31'
            },
            {
              'name': '低消费',
              'value': '38.4'
            }
          ],
          'ageListProList': [
            {
              'name': '18-24',
              'value': '4.35'
            },
            {
              'name': '25-30',
              'value': '6.48'
            },
            {
              'name': '31-35',
              'value': '8.69'
            },
            {
              'name': '36-40',
              'value': '11.43'
            },
            {
              'name': '41-45',
              'value': '26.33'
            },
            {
              'name': '46-50',
              'value': '24.37'
            },
            {
              'name': '51-55',
              'value': '8.73'
            },
            {
              'name': '56-60',
              'value': '4.73'
            },
            {
              'name': '61-65',
              'value': '3.7'
            },
            {
              'name': '65+',
              'value': '1.19'
            }
          ]
        }
        fn(getData)
      }
      this.loading2 = false
    },
    // 时间处理
    timeChange(time, mark) {
      let time1 = new Date(time).getTime()
      if (mark === 'DAY') {
        var newTime = time1 + 6 * 24 * 60 * 60 * 1000
      } else if (mark === 'start') {
        var newTime = time1 - 6 * 24 * 60 * 60 * 1000
      } else if (mark === 'start1') {
        var newTime = time1
      }

      let year = new Date(newTime).getFullYear()
      let month =
        new Date(newTime).getMonth() + 1 >= 10
          ? new Date(newTime).getMonth() + 1
          : '0' + (new Date(newTime).getMonth() + 1)
      let day =
        new Date(newTime).getDate() >= 10
          ? new Date(newTime).getDate()
          : '0' + new Date(newTime).getDate()
      return `${year}-${month}-${day}`
    }
  },
  mounted() {
    // this.init();
    // this.getChhartOne()
    // this.getChartEight()
    // this.getChartRang('chartTen', data, { title: ['年收入'] })
    // this.getChartRang('chartNine', data, { title: ['学历分布'] })
    // this.$nextTick(() => {
    if (this.infoId) {
      this.getSegmentation()
    } else {
      this.queryPortraitGroupLabel() // 客群标签
      this.queryPortraitGroupSex() // 客群分布
      this.queryPortraitGroupRisk() // 险种和地域查询
    }
    this.queryPortraitGroupCount()  // 客户数量查询
    this.queryPortraitGroupActive() // 客户活跃
    // })
  },
  created() {
    this.infoId = this.$route.query.infoId || ''
    this.value1 = [
      this.timeChange(new Date(), 'start'),
      this.timeChange(new Date(), 'start1')
    ]
    this.value11 = [
      this.timeChange(new Date(), 'start'),
      this.timeChange(new Date(), 'start1')
    ]

    // Promise.all(
    //   [
    //   this.queryPortraitGroupLabel(),
    //   this.queryPortraitGroupSex(),
    //   this.queryPortraitGroupRisk(),
    //   this.queryPortraitGroupCount(),
    //   this.queryPortraitGroupActive(),
    // ]
    // );
  }
}
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.titlt {
  width: 100%;
  height: 60px;
  background: #ffffff;
  border-radius: 8px;
  background-color: #fff;
  font-size: 20px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #2a2a2a;
  line-height: 60px;
  padding-left: 20px;

  .back {
    float: right;
    margin-top: 18px;
    margin-right: 22px;
    width: 72px;
    height: 32px;
    background: #e7e7e7;
    border-radius: 3px;
    border: none !important;
    color: #2a2a2a !important;
  }
}

.mainBox {
  margin-top: 16px;
  width: 100%;
  background: #ffffff;
  border-radius: 8px;
  padding: 16px 20px;

  .mainTitle {
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
  }

  .smallLine {
    width: 4px;
    height: 20px;
    background: #082aff;
    position: absolute;
    left: 8px;
  }
}

.portraitMain {
  padding-left: 10px;
  margin-top: 16px;
  width: 100%;
  height: 346px;
  display: flex;

  .left {
    flex: 1;
    margin-right: 16px;
    // background-color: #2a2a2a;
    display: flex;

    #manBox {
      width: 150px;
      height: 350px;
      // background-color: #25ce2c;
      background-image: url("../../../assets/image/bg3.png");
      background-repeat: no-repeat;
      margin-top: 20px;
    }

    .table {
      width: 70%;
      margin-left: 16px;
      display: flex;
    }
  }

  .right {
    flex: 1;
    // background-color: #082aff;
    display: flex;

    #womanBox {
      width: 250px;
      height: 350px;
      // background-color: #25ce2c;
      background-image: url("../../../assets/image/woman.png");
      background-repeat: no-repeat;
      margin-top: 20px;
    }

    .table {
      width: 65%;
      margin-left: 16px;
      display: flex;
    }
  }
}

.el-table {
  border: none;
}

.el-table::before {
  height: 0px;
}

.el-table--border::after {
  width: 0px;
}

.el-table--border {
  border: none;
}

.changeBox {
  float: right;
  margin: 0px 0 20px;

  .el-radio-group {
    border-radius: 10px;

    .el-radio-button {
      margin-right: 18px;

      ::v-deep .el-radio-button__inner {
        //border: 1px solid #eeeeee;
        border-radius: 6px;
        //background-color: #EBEEFF;
        //border-color: #EBEEFF;
        background-color: #eee;
        border-color: #eee ;
        &:active{
          background-color: #EBEEFF;
          border-color: #EBEEFF;
        }
      }
    }
  }
}

.chartBox {
  width: 100%;
  height: 400px;
  display: flex;

  .chartItem {
    flex: 1;
    border: 1px solid #eeeeee;
    // margin-right: 20px;
    box-sizing: border-box;
  }

  #chartTwo {
    margin: 0 16px;
  }
}

.areaBox {
  width: 100%;
  margin-left: -20px;
  margin-top: 16px;

  .areaItem {
    width: 100%;
    height: 442px;
    padding-right: 40px;
    box-sizing: border-box;
    display: flex;

    .item {
      flex: 1;
    }

    #chartFour {
      margin-right: 16px;
    }
  }
}

.titleBox {
  margin-top: 50px;
  display: flex;

  .titleItem {
    height: 92px;
    background: #fafafa;
    border-radius: 4px;
    border: 1px solid #eeeeee;
    flex: 1;
    margin-right: 14px;
    padding: 20px 0 0 28px;

    .topic {
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #41433c;
      line-height: 18px;
      letter-spacing: 1px;
    }

    .number {
      margin-top: 15px;
      font-size: 24px;
      font-family: Arial-BoldMT, Arial;
      font-weight: normal;
      color: #393b44;

      span {
        margin-left: 7px;
        font-size: 12px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #41433c;
      }
    }
  }
}

#chartFive {
  width: 115%;
  height: 300px;
  margin-left: -100px;
}

.selete {
  float: right;
  display: inline-block;
  margin-left: 5px;

  ::v-deep .el-select {
    width: 150px;
    height: 32px;
    border-radius: 16px;

    .el-input--small .el-input__inner {
      width: 150px;
      height: 32px;
      border-radius: 16px !important;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
    }
  }
}

#chartSix {
  margin-top: 40px;
  width: 115%;
  height: 300px;
  margin-left: -100px;
  overflow-y: auto;
}

.rightSider {
  float: right;
  margin-bottom: 17px;
  margin-right: 18px;

  .selector {
    margin-right: 18px;
  }
}

[v-cloak] {
  display: none;
}
</style>
